<template>
  <app-content class="h-panel">
    <template v-if="showList">
      <div class="h-panel-bar"><span class="h-panel-title">报表</span></div>
      <div class="h-panel-body" style="padding:60px 0 60px 60px; font-size: 18px">
        <Row :space="60">
          <Cell width="3" v-for="item in dataList" :key="item.id">
            <div class="report-item" @click="handleChangeReport(item.id)">{{item.name}}</div>
          </Cell>
        </Row>
      </div>
    </template>
    <template v-if="showDetail">
      <Loading text="数据加载中..." :loading="loading"></Loading>
      <div class="h-panel-bar">
        <span class="h-panel-title"><template v-if="report">{{report.name}}</template>&nbsp;</span>
        <Button class="float-right" @click="handleBackList">返回</Button>
      </div>
      <div class="margin-top margin-left margin-right">
        <account-date-choose v-model="accountDate"/>
        <Button @click="loadList" style="margin-left:5px">刷新</Button>
        <div class="h-btn float-right" @click="handleEditTemplate(reportId)">编辑数据项</div>
      </div>
      <div class="h-panel-body">
        <Table class="small-td" :datas="templateItems" selectRow border v-if="report.type==0||report.type==2">
          <TableItem title="名称">
            <div slot-scope="{data}" :class="{'font-bold':data.isBolder}" :style="{paddingLeft:((data.level-1)*15)+'px'}">{{data.title}}</div>
          </TableItem>
          <TableItem title="行次">
            <template slot-scope="{data}">
              {{data.isClassified ? '':data.lineNum>-1?data.lineNum:''}}
            </template>
          </TableItem>
          <TableItem title="本年累计金额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.id]?reportData[data.id].currentYearAmount:''|numFormat}}
            </template>
          </TableItem>
          <TableItem title="本期金额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.id]?reportData[data.id].currentPeriodAmount:''|numFormat}}
            </template>
          </TableItem>
        </Table>
        <Table :datas="templateItemsRender" selectRow border v-else-if="report.type == 1">
          <TableItem title="资产">
            <div slot-scope="{data}" :class="{'font-bold':data.isBolder}" :style="{paddingLeft:((data.level-1)*15)+'px'}">{{data.title}}</div>
          </TableItem>
          <TableItem title="行次">
            <template slot-scope="{data}">
              {{data.isClassified ? '':data.lineNum>-1?data.lineNum:''}}
            </template>
          </TableItem>
          <TableItem title="期末余额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.id]?reportData[data.id].currentPeriodAmount:''|numFormat}}
            </template>
          </TableItem>
          <TableItem title="年初余额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.id]?reportData[data.id].currentYearAmount:''|numFormat}}
            </template>
          </TableItem>
          <TableItem title="负债和所有者权益">
            <div slot-scope="{data}" :class="{'font-bold':data.fs_isBolder}" :style="{paddingLeft:((data.fs_level-1)*15)+'px'}">{{data.fs_title}}</div>
          </TableItem>
          <TableItem title="行次">
            <template slot-scope="{data}">
              {{data.fs_isClassified ? '':data.fs_lineNum>-1?data.fs_lineNum:''}}
            </template>
          </TableItem>
          <TableItem title="期末余额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.fs_id]?reportData[data.fs_id].currentPeriodAmount:''|numFormat}}
            </template>
          </TableItem>
          <TableItem title="年初余额" align="right">
            <template slot-scope="{data}">
              {{reportData[data.fs_id]?reportData[data.fs_id].currentYearAmount:''|numFormat}}
            </template>
          </TableItem>
        </Table>
      </div>
    </template>
    <template v-if="showTemplate">
      <div class="h-panel-bar">
        <span class="h-panel-title">{{template.name}} - 数据项</span>
        <button @click="handleBackDetail" class="h-btn float-right">返回</button>
      </div>
      <div class="margin-top margin-left">
        <Button color="primary" @click="showForm()" :style="btnStyle">添加项目</Button>
      </div>
      <div class="h-panel-body">
        <Table :datas="templateEditItems" selectRow>
          <TableItem title="操作" align="center" :width="200">
            <div class="actions" slot-scope="{data}">
              <span @click="showForm(data)" :style="fontStyle">添加</span>
              <span @click="showForm({id:data.parentId},data)" :style="fontStyle">编辑</span>
              <span v-if="!data.isClassified" @click="showFormulaModal(data,template.type)" :style="fontStyle">公式</span>
              <span @click="remove(data)" :style="fontStyle">删除</span>
            </div>
          </TableItem>
          <TableItem :width="40" align="center">
            <div slot-scope="{data}">{{data.isClassified?'归类':''}}</div>
          </TableItem>
          <TableItem title="名称">
            <div slot-scope="{data}" :class="{'font-bold':data.isBolder}" :style="{paddingLeft:((data.level-1)*15)+'px'}">{{data.title}}</div>
          </TableItem>
          <TableItem title="行次" align="center">
            <div slot-scope="{data}">{{data.isClassified?'':data.lineNum}}</div>
          </TableItem>
          <TableItem title="类型" v-if="template.type == 1">
            <div slot-scope="{data}">{{data.isClassified?'':data.type| dictMapping('reportTemplateItemType')}}</div>
          </TableItem>
          <TableItem title="取数来源">
            <div slot-scope="{data}">{{data.isClassified?'':data.sources| dictMapping('reportTemplateItemSources')}}</div>
          </TableItem>
          <TableItem title="显示位置" prop="pos" :width="80" align="center"></TableItem>
        </Table>
      </div>
      <TemplateItemModal @success="loadTemplate" :template="template" ref="templateItemModal" :templateItems="templateEditItems"/>
      <TemplateItemFormulaModal @success="loadTemplate" ref="templateItemFormulaModal" :templateItems="templateEditItems"/>
    </template>
  </app-content>
</template>

<script>
  import TemplateItemModal from "./TemplateItemModal";
  import TemplateItemFormulaModal from "./TemplateItemFormulaModal";
  import {mapState} from 'vuex'
  import moment from 'moment'
  import Vue from 'vue'
  import { DEFAULT_COLOR } from '@/store/mutation-types'
  import { updateTheme } from '@comp/tools/setting'
  export default {
    name: "Report",
    components: {TemplateItemFormulaModal, TemplateItemModal},
    data() {
      return {
        loading: false,
        templateModel: false,
        form: {
          name: '',
          templateKey: '',
          type: 0
        },
        validationRules: {
          required: ['name', 'templateKey'],
          rules: {
            templateKey: {
              valid: {
                pattern: /^[a-z]+$/i,
                message: '只能为纯字母'
              }
            }
          }
        },
        template: {},
        templateItemFormulaModel: false,
        templateItem: null,
        templateItemFormula: null,
        templateItemFormulas: [],
        dataList: [],
        showList: true,
        showDetail: false,
        showTemplate: false,
        report: {},
        reportData: {},
        reportId: '',
        accountDate: null,
        btnStyle: { background: '', borderColor: ''},
        fontStyle: { color: ''},
      }
    },
    computed: {
      ...mapState(['User']),
      templateItems() {
        return this.report ? this.report.items : [];
      },
      templateEditItems() {
        return this.template.items;
      },
      templateItemsRender() {
        if (this.report.type === 1) {
          //所有资产
          let zc = this.templateItems.filter(val => val.type === 0);
          let sq = this.templateItems.filter(val => val.type !== 0);
          sq.forEach((val, index) => {
            let changeObj = {
              fs_id: val.id,
              fs_lineNum: val.lineNum,
              fs_isBolder: val.isBolder,
              fs_level: val.level,
              fs_isClassified: val.isClassified,
              fs_title: val.title
            };
            if (zc[index]) {
              Object.assign(zc[index], changeObj);
            }
          });
          return zc;
        }
        return [];
      }
    },
    watch: {
      accountDate() {
        this.loadReport();
      },
      reportId() {
        this.loadReport();
      }
    },
    mounted () {
      this.primaryColor = Vue.ls.get(DEFAULT_COLOR)
      updateTheme(this.primaryColor)
      this.btnStyle.background = this.primaryColor
      this.btnStyle.borderColor = this.primaryColor
      this.fontStyle.color = this.primaryColor
      this.loadList()
    },
    methods: {
      loadList() {
        this.$api.report.template.list().then(({data}) => {
          this.dataList = data;
        });
      },
      loadReport() {
        this.$api.report.template.load(this.reportId).then(({data}) => {
          this.report = data;
          this.$nextTick(this.loadReportData);
        });
      },
      loadReportData() {
        this.loading = true;
        let accountDateStr = moment(this.accountDate).format('YYYY-MM-DD HH:mm:ss')
        this.$api.report.view(this.reportId, {accountDate: accountDateStr}).then(({data}) => {
          this.reportData = data;
        }).finally(() => this.loading = false);
      },
      handleChangeReport(id) {
        this.reportId = id
        this.showList = false
        this.showDetail = true
        this.showTemplate = false
      },
      handleBackList() {
        this.showList = true
        this.showDetail = false
        this.showTemplate = false
      },
      handleBackDetail() {
        this.showList = false
        this.showDetail = true
        this.showTemplate = false
      },
      handleEditTemplate(reportId) {
        this.showList = false
        this.showDetail = false
        this.showTemplate = true
        this.templateId = reportId
        this.loadTemplate()
      },
      showForm(parent, org) {
        this.$refs.templateItemModal.toggle(parent, org);
      },
      showFormulaModal(item, type) {
        this.$refs.templateItemFormulaModal.toggle(item, type);
      },
      loadTemplate() {
        this.$api.report.template.load(this.templateId).then(({data}) => {
          this.template = data;
        });
      },
      remove(data) {
        this.$Confirm("确认删除?").then(() => {
          this.$api.report.template.items.delete(data.id).then(() => {
            this.loadTemplate();
          })
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .h-panel-bar {
    padding: 10px 20px;
  }
  .h-panel-body {
    padding: 10px 20px;
  }
  div.font-bold {
    font-size: 14px;
  }
  .report {
    &-item {
      border-radius: 5px;
      border: 1px solid gray;
      text-align: center;
      padding: 10px;

      &:hover {
        cursor: pointer;
        box-shadow: 0 0 20px 2px rgba(102, 100, 100, 0.24), 0px 2px 4px 0px rgba(199, 198, 198, 0.5);
      }
    }
  }
</style>
